<template>
  <div style="line-height: 60px; display: flex">
    <div style="flex: 1; font-size: 20px">
      <span :class="collapseBtnClass" style="cursor: pointer; font-size: 20px" @click="collapse"></span>
      <el-breadcrumb separator="/" style="display: inline-block; margin-left: 10px">
        <el-breadcrumb-item :to="{path: breakCrumbItem.path}" v-for="breakCrumbItem in breakCrumbList" :key="breakCrumbItem.path">{{breakCrumbItem.meta.title}}</el-breadcrumb-item>
<!--        <el-breadcrumb-item>{{currentPathName}}</el-breadcrumb-item>-->
      </el-breadcrumb>
    </div>
    <!--     cursor: pointer 鼠标悬浮在上方变成手   -->
    <el-dropdown style="width: 70px;margin-right: 10px; cursor: pointer">
      <span>{{userName}}</span>
      <i class="el-icon-arrow-down" style=""></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>个人空间</el-dropdown-item>
        <el-dropdown-item @click.native="logOut">退出登录</el-dropdown-item>
<!--        <el-dropdown-item>删除</el-dropdown-item>-->
      </el-dropdown-menu>
    </el-dropdown>
  </div>

</template>

<script>
export default {
  name: "Header",
  data(){
    return{
      userName: localStorage.getItem("userName")
    }
  },
  props: {
    collapseBtnClass: String,
    // 点击左边菜单栏收缩按钮
    collapse: {type: Function}
  },
  computed:{
    breakCrumbList(){
      return this.$route.matched;
    }
  },
  mounted() {
    console.log(this.$route);
  },
  methods:{
    logOut(){
      localStorage.clear()
      this.$router.push({name:"Login"})
    }
  }
}
</script>

<style scoped>

</style>